<!--
  @description icon图标管理
  @author cjs1992
  @date 2020-07-02 09:43:11
-->
<template>
  <div class="app_container">
    <div class="baseBorderRadius baseBoderShadow bgWhite">
      <div class="handle_wrap">
        <el-button
          type="primary"
          @click="addFunc"
        >新 增</el-button>
        <el-button @click="delFunc(1)">删 除</el-button>
        <el-button @click="delFunc(2)">删除全部</el-button>
      </div>
      <div
        class="table_wrap"
        style="padding: 10px 20px;"
      >
        <div class="table_box">
          <el-checkbox-group v-model="checkList">
            <el-row :gutter="0">
              <template v-for="(item, index) in tableData">
                <el-col
                  :span="4"
                  :key="index"
                >
                  <div class="icon_wrap">
                    <el-checkbox :label="item.id">&nbsp;</el-checkbox>
                    <svg-icon :iconClass="item.name"></svg-icon>
                    <div style="margin-top: 5px;">{{item.name}}</div>
                    <div class="absolute_box">
                      <el-link
                        type="primary"
                        @click="editFunc(item)"
                        class="edit"
                      >编辑</el-link>
                      <el-link
                        type="danger"
                        @click="delFunc(item)"
                        class="del"
                      >删除</el-link>
                    </div>
                  </div>
                </el-col>
              </template>

            </el-row>
          </el-checkbox-group>
          <!-- <Table
            :hasCheck="true"
            :tableData="tableData"
            :theadData="theadData"
            v-model="multipleSelection"
          >
            <template v-slot:icon="{ scope }">
              <div class="icon_wrap">
              <svg-icon :iconClass="scope.row.name"></svg-icon>
              </div>
            </template>
            <template v-slot:ope="{ scope }">
              <div>
                <el-button size="mini" round
                  type="primary"
                  @click="editFunc(scope.row)"
                >编辑</el-button>
                <el-button
                size="mini"
                  round
                  @click="delFunc(scope.row)"
                >删除</el-button>
              </div>
            </template>
          </Table> -->
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="600px"
      title="图标维护"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="form_ref"
        label-width="120px"
      >
        <el-form-item
          label="图标名称"
          prop="name"
        >
          <el-input v-model.trim="formData.name"></el-input>
        </el-form-item>
        <el-form-item
          label="图标尺寸"
          prop="svgSize"
        >
          <el-input
            v-model="formData.svgSize"
            v-num="0"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="图标svg"
          prop="svgStr"
        >
          <el-input
            v-model.trim="formData.svgStr"
            type="textarea"
            :rows="12"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        class="dialog-footer"
        slot="footer"
        style="text-align: center;"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >保 存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Table from "@/components/table/table.vue";
import * as apiObj from "@/api/icon.js";
export default {
  name: "icon_management",
  components: {
    Table
  },
  data() {
    return {
      editId: "",
      tableData: [],
      theadData: [
        { name: "序号", code: "index" },
        { name: "图标名称", code: "name" },
        { name: "图标", code: "a", slotName: "icon" },
        { name: "操作", code: "a", slotName: "ope", width: "200px" }
      ],
      multipleSelection: [],
      formData: {
        name: "",
        svgSize: 200,
        svgStr: ""
      },
      rules: {
        name: [
          { required: true, message: "图标名称不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20", trigger: "blur" }
        ],
        svgSize: [
          { required: true, message: "图表尺寸不能为空", trigger: "blur" }
          // { validator: callback, trigger: 'blur' }
        ],
        svgStr: [
          { required: true, message: "图标svg不能为空", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      checkList: []
    };
  },
  mounted() {
    this.findIconList();
  },
  methods: {
    /**
     * @name editFunc
     * @description 编辑方法
     * @author cjs1992
     * @date 2020-07-02 11:06:21
     */
    editFunc(param) {
      const { id, name, svgStr, svgSize } = param;
      this.editId = id;
      this.formData = {
        name,
        svgStr,
        svgSize
      };
      this.dialogVisible = true;
      try {
        this.$refs["form_ref"].clearValidate();
      } catch (err) {
        // 无需理会
      }
    },
    /**
     * @name delFunc
     * @description 删除方法
     * @author cjs1992
     * @date 2020-07-02 11:07:58
     */
    delFunc(param) {
      let ids = "";
      if (param === 1) {
        // 批量删除
        if (this.checkList.length === 0) {
          this.$message({
            type: "warning",
            message: "请选择要删除的图标"
          });
          return;
        }
        ids = this.checkList.join(",");
      } else if (param === 2) {
        ids = this.tableData.map(item => item.id).join(',');
      } else {
        // 单个删除
        ids = param.id;
      }
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await apiObj.deleteIconBatch({ ids });
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.findIconList();
        })
        .catch(() => {});
    },
    /**
     * @name submitForm
     * @description 提交表单数据
     * @author cjs1992
     * @date 2020-07-02 10:43:35
     */
    async submitForm() {
      this.$refs["form_ref"].validate(async valid => {
        if (valid) {
          let url = "addIcon";
          let obj = {};
          if (this.editId) {
            url = "updateIcon";
            obj.id = this.editId;
          }
          await apiObj[url]({
            ...obj,
            ...this.formData
          });
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.dialogVisible = false;
          this.findIconList();
        }
        return false;
      });
    },
    /**
     * @name addFunc
     * @description 新增方法
     * @author cjs1992
     * @date 2020-07-02 10:33:09
     */
    addFunc() {
      this.editId = "";
      this.formData = {
        name: "",
        svgStr: "",
        svgSize: 200
      };
      this.$nextTick(() => {
        this.$refs["form_ref"].clearValidate();
      });
      this.dialogVisible = true;
    },
    /**
     * @name findIconList
     * @description 获取icon
     * @author cjs1992
     * @date 2020-07-02 09:48:15
     */
    async findIconList() {
      const res = await apiObj.findIconList();
      let list = res.data || [];
      list.map((item, index) => {
        item.index = index + 1;
      });
      this.tableData = list;
      let str = "";
      for (let item of list) {
        let viewBox = "0 0 200 200";
        if (item.svgSize) {
          viewBox = `0 0 ${item.svgSize} ${item.svgSize}`;
        }
        str += `<symbol xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" id='icon-${item.name}'>
              ${item.svgStr}
            </symbol>`;
      }
      str = `<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__myOwn">
          ${str}
        </svg>`;
      if (document.querySelector("#icon_div_wrap")) {
        document.querySelector("#icon_div_wrap").innerHTML = str;
        return;
      }
      let div = document.createElement('div');
        div.id = 'icon_div_wrap';
        div.setAttribute('style', 'position: absolute;width: 0; height: 0;');
        // div.style.position = 'absolute';
        // div.style.width = '0';
        // div.style.height = '0';
        div.innerHTML = str;
      document.body.insertBefore(div, document.querySelector('#__SVG_SPRITE_NODE__'));
    }
  }
};
</script>
<style lang="scss" scoped>
.table_box {
  /deep/ {
    .el-col {
      border: 1px solid #e0e0e0;
      border-width: 0 1px 1px 0;
    }
    .el-row {
      border: 1px solid #e0e0e0;
      border-width: 1px 0 0 1px;
    }
    .icon_wrap {
      height: 140px;
      text-align: center;
      padding-top: 40px;
      position: relative;
      .el-checkbox {
        position: absolute;
        left: 0;
        top: 0;
        .el-checkbox__inner {
          border-color: #b7b8bb;
          width: 24px;
          height: 24px;
          &::after {
            transform: translate(3px, 2px) rotate(45deg) scale(0);
          }
        }
        .is-indeterminate {
          .el-checkbox__inner {
            // width: 24px;
            // height: 24px;
            &::before {
              transform: translateY(2px) scale(0.8);
            }
          }
        }
        &.is-checked {
          .el-checkbox__inner {
            // width: 24px;
            // height: 24px;
            &::after {
              transform: translate(4px, 2px) rotate(45deg) scale(1.6);
            }
          }
        }
      }
      .svg-icon {
        font-size: 30px;
      }
      &:hover {
        color: #35d1a4;
        // .svg-icon {
        //   color:#35d1a4;
        // }
        .absolute_box {
          display: block;
        }
      }
      .absolute_box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.3);
        display: none;
        line-height: 30px;
        color: #FFFFFF;
        .del{
        	color: #FFFFFF;
        }
        .edit {
          margin-right: 30px;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
